import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
import { setTitle } from '@/lib/util.js'


Vue.use(Router)

const router = new Router({
  //# 去除: html5 的 history  ,做 无刷新页面的 跳转,需要后端的支持,
  //当没有匹配到静态资源的时候,前端路由也匹配不到组件的话,要设置路由匹配规则,统一指根路径
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: routes
})

const HAS_LOAD = true

//注册一个全局前置守卫
//to 即将跳转的路由对象
//from 当前将要离开的路由对象
//next 一个函数,如果你确定要跳转,会用到next 这个函数
//简单的登录判断
router.beforeEach((to,from,next) => {
  to.meta && setTitle(to.meta.title)
  if (to.name !== 'login') {
    if (HAS_LOAD) next()
    else next({ name: 'login' })
  }else{
    if (HAS_LOAD) next({ name: 'home' })
    else next()
  }
})


router.afterEach((to,from) => {
  //logining =false , 路由跳转之后把等待加载的按钮取消
})


//导航被确认之前: 所有的导航钩子都结束,这个导航就被确认了
//异步路由解析之后,就会触发这个路由守卫钩子函数
// router.beforeResolve((to,from) => {
  
// })

//路由的独享守卫在路由列表内配置


/* 
  一个完整的导航解析流程

  1. 导航被触发
  2. 在失活组件(即将离开的页面组件) 里调用 离开守卫  : beforeRouteLeave
  3. 调用全局的前置守卫 :  beforeEach
  4. 在 复用的组件里 调用 : beforeRouteUpdate
  5. 调用路由独享的守卫 : beforeEnter (路由列表里配置的)
  6. 解析异步路由组件
  7. 在被激活的组件(即将进入的组件页面)里 调用 :  beforeRouteEnter
  8. 调用全局的解析守卫 : beforeResolve   (导航确认之前,异步路由解析之后被调用)
  9. 导航被确认
  10. 调用全局的后置守卫 : afterEach
  11. 触发Dom 更新
  12. 用创建好的实例调用 beforeRouteEnter守卫里传给next 的回调函数(即那个穿过来的vm <this>,页面的实例对象)
*/

export default router
